<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreateCom" type="primary" icon="edit">添加社区
      </el-button>
    </div>
    <avue-tree-table :option="option">
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="handleCreate(scope.row)" type="primary" size="small">添加下级</el-button>
          <el-button @click="handleUpdate(scope.row)" size="small" type="success">编辑</el-button>
          <el-button @click="del(scope.row)" size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </avue-tree-table>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form" label-width="100px">
        <el-form-item label="编号" prop="did" v-if="dialogStatus == 'update'">
          <el-input v-model="form.id" placeholder="编号" :disabled="true"></el-input>
          <el-input v-model="communityPid" :display="false"></el-input>
        </el-form-item>
        <el-form-item label="上级设备" prop="pName">
          <el-input v-model="pName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="form.deviceName" placeholder="门禁名称"></el-input>
        </el-form-item>
        <el-form-item label="设备编号" prop="deviceId">
          <el-input v-model="form.deviceId" placeholder="设备编号"></el-input>
        </el-form-item>
        <el-form-item label="读头编码" prop="scanningCode">
          <el-input v-model="form.scanningCode" placeholder="类型"></el-input>
        </el-form-item>
        <el-form-item label="控制器编码" prop="hubCode">
          <el-input v-model="form.hubCode" placeholder="控制器编码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
        <el-button v-else type="primary" @click="update('form')">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchDeviceTree, add, put, del } from '@/api/device'
export default {
  name: 'treeTableDemo',
  data() {
    return {
      listLoading: true,
      listQuery: {},
      dialogFormVisible: false,
      dialogStatus: '',
      pName: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      option: {
        columns: [
          {
            text: '设备名称',
            value: 'name',
            width: 300,
            align: 'center'
          },
          {
            text: '设备编号',
            value: 'deviceId',
            align: 'center'
          },
          {
            text: '集线器协议',
            value: 'hubCode'
          },
          {
            text: '读头协议',
            value: 'scanningCode'
          }
        ],
        data: []
      },
      form: {}
    }
  },
  created() {
    this.listTree()
  },
  methods: {
    message(row) {
      const obj = Object.assign({}, row)
      console.log(obj)
    },
    listTree() {
      fetchTree().then(response => {
        this.option.data = response.data.data
      })
    },
    handleCreateCom() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.form.communityPid = 0
    },
    handleCreate(row) {
      console.log(row)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.pName = row.name
      this.form.communityPid = row.id
    },
    handleUpdate(row) {
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.form.id = row.did
      this.form.deviceName = row.name
      this.form.deviceId = row.deviceId
      this.form.scanningCode = row.scanningCode
      this.form.hubCode = row.hubCode
      this.pName = row.parent == null ? row.name : row.parent.name
    },
    create(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          add(this.form).then(() => {
            this.dialogFormVisible = false
            this.listTree()
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    },
    cancel(formName) {
      this.dialogFormVisible = false
      const set = this.$refs
      set[formName].resetFields()
    },
    update(formName) {
      const set = this.$refs
      console.log(set)
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          put(this.form).then(() => {
            this.dialogFormVisible = false
            this.listTree()
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    },
    del(row) {
      this.$confirm(
        '此操作将删除该设备(设备名称:' + row.name + '), 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        console.log(row.did)
        del(row.did)
          .then(() => {
            this.listTree()
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
          .cache(() => {
            this.$notify({
              title: '失败',
              message: '删除失败',
              type: 'error',
              duration: 2000
            })
          })
      })
    }
  }
}
</script>